<template>
	<div class="header">
		<div class="header-left"><span class="iconfont">&#xe624;</span></div>
		<div class="header-input"><span class="iconfont">&#xe632;<p>输入城市/景点/游玩主题</p></span></div>
		<div class="header-right">{{this.city}}<span class="iconfont">&#xe600;</span></div>
	</div>
</template>

<script>
export default{
	name:'HomeHeader',
	props:{
		city:String
	}
}
</script>

<style scoped>            /*scoped这个样式只对当前组件有效*/  
	.header{
		height: 0.86rem;
		display: flex;
		align-items: center;
		background: #00bcd4;
	}
	.header-left{
		width: 0.64rem;
		float: left;
		text-align: center;
	}
	.header-right{
		width: 1.24rem;
		height: auto;
		float: right;
		text-align: center;
	}
	.header-input{
		height: .64rem;
		border-radius: 0.1rem;
		background: #FFFFFF;
		flex: 1;
		line-height: 0.62rem;
		color: #ccc;
	}
	.header-input span{
		display: flex;
		align-items: center;
		float: left;
		font-size: 0.36rem;
		margin-left: 0.12rem;
	}
	.header-input span p{
		margin-left: 0.12rem;
		font-size: 0.28rem;
	}
	
</style>